.header-info-section {
  width: 100%;
  flex-direction: row !important;
}

.header-cover-img {
  border-radius: 0.5rem;
  flex-shrink: 0;
}

/* --- 歌曲列表 --- */
.song-list-container {
  flex-grow: 1;
  overflow-y: auto;
  /* 关键：只让这个区域滚动 */
}

.song-list-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.song-list-item:hover {
  background-color: #f5f5f5;
}

/* --- 歌单选择模态框 --- */
.playlist-selector-item {
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 0.375rem;
  padding: 0.75rem;
}

.playlist-selector-item:hover {
  background-color: #f5f5f5;
}

/* --- 响应式布局 --- */
/* 当屏幕宽度小于 576px 时 (典型手机宽度) */
@media (max-width: 36rem) {
  .playlist-header {
    padding: 0.625rem;
  }

  .header-info-section {
    /* 在小屏幕上，封面和文字垂直堆叠 */
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 1rem;
  }


  .header-actions {
    justify-content: center;
    width: 100%;
  }
}

/* src/pages/Playlist.css */

/* 让主容器占满可用高度并使用 Flex 布局 */
.playlist-page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 固定的头部区域 */
.playlist-header-sticky {
  /* flex-shrink: 0 确保头部不会在空间不足时被压缩 */
  flex-shrink: 0;
  padding: 0.625rem;
  background-color: #fff;
  /* 或者你的页面背景色 */
  border-bottom: 0.0625rem solid #f0f0f0;
}

/* 可滚动的内容区域 */
.song-list-scrollable {
  /* flex-grow: 1 让这个区域占据所有剩余空间 */
  flex-grow: 1;
  /* overflow-y: auto 使其在内容溢出时出现垂直滚动条 */
  overflow-y: auto;
}

/* 表格行的样式，增加点击手势 */
.song-table-row {
  cursor: pointer;
}

/* 封面选择网格中的图片样式 */
.cover-selector-item {
  cursor: pointer;
  border: 0.125rem solid transparent;
  border-radius: 0.25rem;
  transition: border-color 0.2s;
}

.cover-selector-item:hover {
  border-color: #1677ff;
  /* antd 主题蓝 */
}

/* 封面被选中时的样式 */
.cover-selector-item.selected {
  border-color: #ff4d4f;
  /* antd 主题红 */
  box-shadow: 0 0 0.3125rem rgba(255, 77, 79, 0.5);
}

.create-playlist-button {
  position: relative;
  top: -3.5rem;
  right: -0.5rem;
  padding: 0.5rem;
  z-index: 999;
}